window.onload = function () {

  // 记录点击的缩略图下标
  var bigImgIndex = 0;

  // 路径导航的数据渲染
  navPathDataBind()
  function navPathDataBind() {

    // 获取元素对象
    var navPath = document.querySelector('#warpper #centent .cententMain #navPath');

    // 获取数据
    var path = goodData.path;

    // 遍历数组
    for (var i = 0; i < path.length; i++) {
      if (i == path.length - 1) {
        // 只需要创建一个a 不带href属性
        var aNode = document.createElement("a");
        aNode.innerText = path[i].title;
        navPath.appendChild(aNode);

      } else {
        // 创建a标签
        var aNode = document.createElement("a");
        aNode.href = path[i].url;
        aNode.innerText = path[i].title;

        // 创建i标签
        var iNode = document.createElement("i");
        iNode.innerText = '/';

        // 插入元素
        navPath.appendChild(aNode);
        navPath.appendChild(iNode);
      }
    }

  }

  // 放大镜的移入和移出效果
  bigClassBindeed()
  function bigClassBindeed() {
    var leftTop = document.querySelector('#warpper #center #left #leftTop')
    var smallPic = document.querySelector('#warpper #center #left #leftTop #smallPic');
    var imagesSrc = goodData.imagesSrc;
    // 设置移入事件
    smallPic.onmouseenter = function () {

      // 创建蒙版元素
      var maskDiv = document.createElement('div');
      maskDiv.className = 'mask';

      // 创建大图框元素
      var bigPic = document.createElement('div');
      bigPic.id = 'bigPic';

      // 创建大图片元素
      var bigImg = document.createElement('img');
      bigImg.src = imagesSrc[bigImgIndex].b

      // 插入
      bigPic.appendChild(bigImg);
      smallPic.appendChild(maskDiv);
      leftTop.appendChild(bigPic)

      // 设置移动事件
      smallPic.onmousemove = function (event) {
        var left = event.clientX - smallPic.getBoundingClientRect().left - maskDiv.offsetWidth / 2;
        var top = event.clientY - smallPic.getBoundingClientRect().top - maskDiv.offsetHeight / 2;

        // 限制边界
        if (left < 0) {
          left = 0;
        } else if (left > smallPic.clientWidth - maskDiv.offsetWidth) {
          left = smallPic.clientWidth - maskDiv.offsetWidth;
        }

        if (top < 0) {
          top = 0;
        } else if (top > smallPic.clientHeight - maskDiv.offsetHeight) {
          top = smallPic.clientHeight - maskDiv.offsetHeight
        }
        maskDiv.style.left = left + 'px';
        maskDiv.style.top = top + 'px';


        // 设置大图的移动
        // 移动的比例关系 = 蒙版元素移动的距离 / 大图片元素移动的距离
        var scale = (smallPic.clientWidth - maskDiv.offsetWidth) / (bigImg.offsetWidth - bigPic.clientWidth)

        bigImg.style.left = - left / scale + 'px'
        bigImg.style.top = - top / scale + 'px'
      }

      // 设置移出事件
      smallPic.onmouseleave = function () {

        smallPic.removeChild(maskDiv)
        leftTop.removeChild(bigPic)
      }
    }
  }

  // 动态渲染放大镜缩略图的数据
  thumbnailDate();
  function thumbnailDate() {

    // 拿元素
    var ul = document.querySelector('#warpper #centent .cententMain #center #left #leftBottom #picList ul');
    var imagesSrc = goodData.imagesSrc;

    // 遍历创建
    for (var i = 0; i < imagesSrc.length; i++) {
      var newLi = document.createElement('li');
      var newImg = document.createElement('img');
      newImg.src = imagesSrc[i].s;

      // 插入
      newLi.appendChild(newImg);
      ul.appendChild(newLi);
    }

  }

  // 点击缩略图的效果
  thumbnailClick()
  function thumbnailClick() {
    // 获取所有的li元素
    var liNodes = document.querySelectorAll('#warpper #centent .cententMain #center #left #leftBottom #picList ul li');
    var smallPic_img = document.querySelector('#warpper #centent .cententMain #center #left #leftTop #smallPic img')
    var imagesSrc = goodData.imagesSrc;

    // 循环点击这些i元素
    for (var i = 0; i < liNodes.length; i++) {
      liNodes[i].index = i;
      liNodes[i].onclick = function () {
        var idx = this.index;
        bigImgIndex = idx;

        // 变换小图路径
        smallPic_img.src = imagesSrc[idx].s;
      }
    }
  }

  // 点击缩略图左右箭头的效果
  thumbnailLeftRightClick();
  function thumbnailLeftRightClick() {
    var pre = document.querySelector('#warpper #centent .cententMain #center #left #leftBottom a.pre');
    var next = document.querySelector('#warpper #centent .cententMain #center #left #leftBottom a.next');

    var picList = document.querySelector('#warpper #centent .cententMain #center #left #leftBottom #picList');
    var ul = document.querySelector('#warpper #centent .cententMain #center #left #leftBottom #picList ul');
    var liNodes = document.querySelectorAll('#warpper #centent .cententMain #center #left #leftBottom #picList ul li')


    // 计算： 发生起点， 步长， 总ul运动的距离
    var start = 0;
    var step = (liNodes[0].offsetWidth + 20) * 2;

    // 总ul运动距离值 = ul的宽度 - div框的宽度 = （图片的总数 - div中显示的数量）* （li的宽度 + 20）
    var endPosition = (liNodes.length - 5) * (liNodes[0].offsetWidth + 20)

    // 发生事件
    pre.onclick = function () {
      start -= step;
      if (start < 0) {
        start = 0;
      }
      ul.style.left = -start + "px";
    }
    next.onclick = function () {
      start += step;
      if (start > endPosition) {
        start = endPosition;
      }
      ul.style.left = -start + 'px';
    }


  }

  // 商品详情数据的动态渲染
  rightTopData();
  function rightTopData() {
    /**
         * 思路：
         * 1、查找rightTop元素
         * 2、查找data.js->goodData->goodsDetail
         * 3、建立一个字符串变量，将原来的布局结构贴进来，将所对应的数据放在对应的位置上重新渲染rightTop元素
         */

    //1、查找元素
    var rightTop = document.querySelector('#warpper #centent .cententMain #center #right .rightTop');

    //2、查找数据
    var goodsDetail = goodData.goodsDetail;

    //3、创建一个字符串(双引号、单引号、模板字符串)变量
    //模板字符串替换数据：${变量}
    var s = `<h3>${goodsDetail.title}</h3>
                <p>${goodsDetail.recommend}</p>
                <div class="priceWrap">
                    <div class="priceTop">
                        <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                        <div class="price">
                            <span>￥</span>
                            <p>${goodsDetail.price}</p>
                            <i>降价通知</i>
                        </div>
                        <p>
                            <span>累计评价</span>
                            <span>${goodsDetail.evaluateNum}</span>
                        </p>
                    </div>
                    <div class="priceBottom">
                        <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                        <p>
                            <span>${goodsDetail.promoteSales.type}</span>
                            <span>${goodsDetail.promoteSales.content}</span>
                        </p>
                    </div>
                </div>
                <div class="support">
                    <span>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span>
                    <p>${goodsDetail.support}</p>
                </div>
                <div class="address">
                    <span>配&nbsp;送&nbsp;至</span>
                    <p>${goodsDetail.address}</p>
                </div>`;

    //4、重新渲染rightTop元素
    rightTop.innerHTML = s;
  }

  // 商品参数数据的动态渲染
  rightBottomData();
  function rightBottomData() {

    var chooseWrap = document.querySelector('#warpper #centent .cententMain #center #right .rightBottom .chooseWrap');

    var crumbData = goodData.goodsDetail.crumbData;

    // 创建dl元素
    for (var i = 0; i < crumbData.length; i++) {
      var dlNode = document.createElement('dl');
      var dtNode = document.createElement('dt');

      dtNode.innerText = crumbData[i].title;

      dlNode.appendChild(dtNode);
      // 嵌套循环 创建dd元素
      for (var j = 0; j < crumbData[i].data.length; j++) {

        var ddNode = document.createElement('dd');
        ddNode.innerText = crumbData[i].data[j].type;
        ddNode.setAttribute('price', crumbData[i].data[j].changePrice);

        dlNode.appendChild(ddNode);
      }

      chooseWrap.appendChild(dlNode);
    }
  }

  // 点击商品参数之后的颜色排他效果
  clickDdBind();
  function clickDdBind() {

    let dlNodes = document.querySelectorAll('#warpper #centent .cententMain #center #right .rightBottom .chooseWrap dl')

    let arr = new Array(dlNodes.length).fill(0);
    let choose = document.querySelector('#warpper #centent .cententMain #center #right .rightBottom .choose')
    for (let k = 0; k < dlNodes.length; k++) {

      let ddNodes = dlNodes[k].querySelectorAll('dd');

      for (let i = 0; i < ddNodes.length; i++) {


        // 点击事件
        ddNodes[i].onclick = function () {
          // 清空choose元素
          choose.innerText = ' '
          for (let j = 0; j < ddNodes.length; j++) {
            ddNodes[j].style.color = "#666";
          }

          this.style.color = 'red';

          arr[k] = this;

          // 调用函数
          changePriceBind(arr)

          //遍历创建的arr，并将非0元素写入mark标记
          arr.forEach(function (value, index) {
            if (value) {
              var markDiv = document.createElement('div');
              markDiv.className = 'mark';
              markDiv.innerText = value.innerText;

              var aNode = document.createElement('a');
              aNode.innerText = 'X';
              // 设置下标
              aNode.setAttribute('index', index)

              markDiv.appendChild(aNode);
              choose.appendChild(markDiv);

            }
          })
          // 删除事件
          var aNodes = document.querySelectorAll('#warpper #centent .cententMain #center #right .rightBottom .choose .mark a');
          for (let i = 0; i < aNodes.length; i++) {

            // 删除点击事件
            aNodes[i].onclick = function () {
              // 获取点击a标签身上的index属性值
              let idx = this.getAttribute('index');

              // 恢复数组中对应下标元素的值
              arr[idx] = 0;

              // 查找对应下标的那个dl行中所有的dd元素
              var ddList = dlNodes[idx].querySelectorAll('dd');

              for (let i = 0; i < ddList.length; i++) {
                ddList[i].style.color = "#666";
              }

              ddList[0].style.color = 'red';


              // 删除对应下标位置的mark标记
              choose.removeChild(this.parentNode);

              // 调用函数
              changePriceBind(arr);

            }
          }

        }

      }

    }
  }

  // 价格变动的函数声明
  function changePriceBind(arr) {

    let oldPrice = document.querySelector('#warpper #centent .cententMain #center #right .rightTop .priceWrap .priceTop .price p');

    // 取出默认的价格
    let price = goodData.goodsDetail.price
    for (let i = 0; i < arr.length; i++) {
      if (arr[i]) {

        let changePrice = Number(arr[i].getAttribute('price'));

        // 最终价格
        price += changePrice;
      }
    }

    oldPrice.innerText = price;

    // 将变化后的价格写入到左侧标签
    var leftPrice = document.querySelector('#warpper #centent .cententMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .left p');
    var ipts = document.querySelectorAll('#warpper #centent .cententMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .middle li input');
    var newprice = document.querySelector('#warpper #centent .cententMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .right i');

    leftPrice.innerText = '¥' + price;

    for (let j = 0; j < ipts.length; j++) {
      if (ipts[j].checked) {
        price += Number(ipts[j].value);
      }
    }

    newprice.innerText = '¥' + price;

  }

  // 选择搭配中间区域复选框选中套餐价格变动效果
  choosePrice();
  function choosePrice() {
    var ipts = document.querySelectorAll('#warpper #centent .cententMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .middle li input');
    var leftPrice = document.querySelector('#warpper #centent .cententMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .left p');
    var newprice = document.querySelector('#warpper #centent .cententMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .right i');


    for (let i = 0; i < ipts.length; i++) {
      ipts[i].onclick = function () {

        var oldprice = Number(leftPrice.innerText.slice(1));
        for (let j = 0; j < ipts.length; j++) {
          if (ipts[j].checked) {

            oldprice = oldprice + Number(ipts[j].value);
          }
        }

        newprice.innerText = '¥' + oldprice;
      }
    }
  }

  // 封装一个公共的选项卡函数
  function Tab(tabBtns, tabConts) {
    for (let i = 0; i < tabBtns.length; i++) {
      tabBtns[i].index = i;
      tabBtns[i].onclick = function () {
        for (var j = 0; j < tabBtns.length; j++) {
          tabBtns[j].className = '';
          tabConts[j].className = ''
        }
        this.className = 'active'
        tabConts[this.index].className = 'active'
      }
    }
  }

  // 点击左侧选项卡
  leftTab()
  function leftTab() {
    var h4s = document.querySelectorAll('#warpper #centent .cententMain .goodsDetailWrap .leftAside .asideTop h4');
    var divs = document.querySelectorAll('#warpper #centent .cententMain .goodsDetailWrap .leftAside .aslideContent >div');

    // 调用函数
    Tab(h4s, divs);
  }

  // 点击右侧选项卡
  rightTab()
  function rightTab() {
    var lis = document.querySelectorAll('#warpper #centent .cententMain .goodsDetailWrap .rightDetail .BottomDetail .tabBtns li');
    var divs = document.querySelectorAll('#warpper #centent .cententMain .goodsDetailWrap .rightDetail .BottomDetail .tabContents div')

    Tab(lis, divs);
  }

  // 右侧侧边栏的点击效果
  rightAsideBind();
  function rightAsideBind() {
    var btns = document.querySelector('#warpper .rightAside .btns');
    var rightAside = document.querySelector('#warpper .rightAside')

    var flag = true;

    btns.onclick = function () {
      if (flag) {

        btns.className = "btns btnsOpen";
        rightAside.className = 'rightAside asideOpen'
      } else {

        btns.className = "btns btnsClose";
        rightAside.className = 'rightAside asideClose'

      }
      flag = !flag;
    }
  }
}

